<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>面包屑导航</title>
    <style>
        /* 另外一种导航为面包屑导航，实例如下： */
        ul.breadcrumb {
            padding: 8px 16px;
            list-style: none;
            background-color: #eee;
        }

        ul.breadcrumb li {
            display: inline;
        }

        ul.breadcrumb li+li:before {
            padding: 8px;
            color: black;
            content: "/\00a0";
        }

        ul.breadcrumb li a {
            color: green;
        }
    </style>
</head>

<body>

    <h2>面包屑导航</h2>
    <ul class="breadcrumb">
        <li><a href="#">首页 </a></li>
        <li><a href="#">前端 </a></li>
        <li><a href="#">HTML 教程 </a></li>
        <li>HTML 段落</li>
    </ul>

</body>

</html>